<template>
  <div class="balls-only">
    <div class="tail-box-wrapper">
      <tail-box :place="item.place.context"></tail-box>
      <div class="parameter">{{item.parameter[activeSwitchIndex]}}</div>
    </div>
    <div class="numbers">
      <lottery-balls
        :activeSwitchIndex="activeSwitchIndex"
        class="lottery-ball-adjust"
        v-for="(numberObj, index) in item.numbers"
        :numberObj="numberObj"
        :key="numberObj.id"
        @click.native="handleBallSelect(index, item.place.context)"
        >
      </lottery-balls>
    </div>
  </div>
</template>
<script>
import TailBox from '@/components/tail-box/tail-box'
import LotteryBalls from '@/components/base/lottery-balls/lottery-balls'
export default {
  components: {
    TailBox,
    LotteryBalls,
  },
  props: {
    item: {
      type: Object,
      default: function() {
        return  {
          id: 1,
          place: {
            context: '胆码',
            position: 0
          },
          parameter: ['遗漏', '冷门'],
          numbers: [
            {
              id: 1,
              number: 1,
              selected: false,
              parameter: [
                {
                  type: 'missing',
                  number: 9.75,
                  context: '遗漏'
                },
                {
                  type: 'unpopular',
                  number: 10,
                  context: '冷门'
                }
              ]
            },
            {
              id: 2,
              number: 2,
              selected: false,
              parameter: [
                {
                  type: 'missing',
                  number: 9.75,
                  context: '遗漏'
                },
                {
                  type: 'unpopular',
                  number: 10,
                  context: '冷门'
                }
              ]
            },
            {
              id: 3,
              number: 3,
              selected: false,
              parameter: [
                {
                  type: 'missing',
                  number: 9.75,
                  context: '遗漏'
                },
                {
                  type: 'unpopular',
                  number: 10,
                  context: '冷门'
                }
              ]
            },
            {
              id: 4,
              number: 4,
              selected: false,
              parameter: [
                {
                  type: 'missing',
                  number: 9.75,
                  context: '遗漏'
                },
                {
                  type: 'unpopular',
                  number: 10,
                  context: '冷门'
                }
              ]
            },
            {
              id: 5,
              number: 5,
              selected: false,
              parameter: [
                {
                  type: 'missing',
                  number: 9.75,
                  context: '遗漏'
                },
                {
                  type: 'unpopular',
                  number: 10,
                  context: '冷门'
                }
              ]
            },
            {
              id: 6,
              number: 6,
              selected: false,
              parameter: [
                {
                  type: 'missing',
                  number: 9.75,
                  context: '遗漏'
                },
                {
                  type: 'unpopular',
                  number: 10,
                  context: '冷门'
                }
              ]
            },
            {
              id: 7,
              number: 7,
              selected: false,
              parameter: [
                {
                  type: 'missing',
                  number: 9.75,
                  context: '遗漏'
                },
                {
                  type: 'unpopular',
                  number: 10,
                  context: '冷门'
                }
              ]
            },
            {
              id: 8,
              number: 8,
              selected: false,
              parameter: [
                {
                  type: 'missing',
                  number: 9.75,
                  context: '遗漏'
                },
                {
                  type: 'unpopular',
                  number: 10,
                  context: '冷门'
                }
              ]
            },
            {
              id: 9,
              number: 9,
              selected: false,
              parameter: [
                {
                  type: 'missing',
                  number: 9.75,
                  context: '遗漏'
                },
                {
                  type: 'unpopular',
                  number: 10,
                  context: '冷门'
                }
              ]
            },
            {
              id: 10,
              number: 10,
              selected: false,
              parameter: [
                {
                  type: 'missing',
                  number: 9.75,
                  context: '遗漏'
                },
                {
                  type: 'unpopular',
                  number: 10,
                  context: '冷门'
                }
              ]
            },
          ]
        }
      }
    },
    activeSwitchIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      count: 0
    }
  },
  created() {
  }, 
  methods: {
    handleBallSelect(index, type) {
      let numbers = this.clonedItem.numbers
      numbers[index].selected = numbers[index].selected ? false : true
      this.$emit('click', this.clonedItem)
    }
  },
  computed: {
    clonedItem() {
      return JSON.parse(JSON.stringify(this.item))
    }
  }
}
</script>

<style lang="stylus">
@import '~@/assets/styles/variables.styl'
  .balls-only
    display flex
    margin 10px 0
    align-items center
    box-sizing border-box  
    padding-left 20px
    .tail-box-wrapper 
      display flex 
      flex-direction column 
      justify-content space-between
      text-align center
      margin-right 20px
      .parameter 
        margin-top 10px
        color $color-sub-gery
    .numbers 
      display flex
      .lottery-ball-adjust
        margin-right 10px
    .selector
      flex 1
      display flex 
      justify-content flex-end
      margin-bottom 15px
      .clear 
        width 50px
        height 32px 
        line-height 32px
        text-align center
        border-radius 16px
        .active 
          color $color-theme-red
    
</style>